/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import virtualDom from '@/assets/images/advanceReact/virtual_dom.png';

import 'highlight.js/styles/atom-one-light.css';
import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function StackReconciler() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3']}>
        <Panel header="1、React15运作机制" key="1">
          <p>
            调和(协调): 虚拟DOM通过如ReactDOM等类库使之与“真实的”DOM同步。 即虚拟DOM --map--&gt;
            真实DOM。
          </p>
          <p>调和是使一致的过程，Diff是找不同的过程，Diff只是调和中更新的一部分。</p>
          <p>React15是栈调和，React16是fiber调和。</p>
        </Panel>
        <Panel header="2、Diff策略的设计思想" key="2">
          <p>
            传统算法，递归遍历树结点，时间复杂度O(n<sup>3</sup>)
          </p>
          <h3>规律</h3>
          <ol>
            <li>DOM跨层级操作并不多，同层级操作是主流。</li>
            <li>若两个组件属于同一个类型，它们将拥有相同的DOM树形结构。</li>
            <li>
              处于同一层级的一组子节点，可用通过设置key作为唯一标识。从而维持各个节点在不同渲染过程中的稳定性。
            </li>
          </ol>
        </Panel>
        <Panel header="3、Diff算法拆分与解读" key="3">
          <ol>
            <li>分层对比</li>
            <li>结点类型一致才继续Diff比较</li>
            <li>key属性的设置，帮我们尽可能复用同层结点</li>
          </ol>
        </Panel>
      </Collapse>
    </div>
  );
}
